<template>
    <div class="base-data-item" :class="resetDateObj.increaseNum < 0 ? 'base-data-item-redbg' : 'base-data-item-greenbg'">
      <div class="title">
        <label>{{ resetDateObj.title }}
          <el-tooltip class="item" effect="dark" :content="resetDateObj.tip" placement="top" v-if="resetDateObj.tip">
          <i class="el-icon-question"></i>
          </el-tooltip>
        </label>
        <span>数据时间：{{ resetDateObj.dateStr }}</span>
      </div>
      <p class="total-number" v-html="resetDateObj.totalNumber"></p>
      <!--
      <p class="total-number">
        <span v-if="basicDataItemIndex === 0 ">￥</span>
        <label>{{ resetDateObj.totalNumber }}</label>
        <span v-if="basicDataItemIndex === 3">%</span>
      </p>
      -->
      <div class="compare">
      <p :class="resetDateObj.increaseNum < 0 ? 'data-red' : 'data-green'">
<!--        <span class="arrow south-east ">&#8600;</span>-->
<!--        <span class="arrow north-east">&#8599;</span>-->
        <span class="arrow south-east el-icon-bottom-right"></span>
        <span class="arrow north-east el-icon-top-right"></span>
        <label>环比增长</label>
        <span v-if="resetDateObj.increaseNum >= 0">+</span>{{ resetDateObj.increase }}%
      </p>
      <template v-if="resetDateObj.prevMonthIncrease">
        <p :class="resetDateObj.prevMonthIncreaseNum < 0 ? 'data-red' : 'data-green'">
          <span class="arrow south-east el-icon-bottom-right"></span>
          <span class="arrow north-east el-icon-top-right"></span>
          <label>较比上月</label>
          <span v-if="resetDateObj.prevMonthIncreaseNum >= 0">+</span>{{ resetDateObj.prevMonthIncrease }}%
        </p>
      </template>
      </div>
    </div>
</template>

<script>
/**
 *       baseDataList: [
 *         { title: '销售总额', dateArr: ['2022-06-08', '2022-06-10'], totalNumber: '15208', increase: '75.00' },
 *         { title: '订单数', dateArr: ['2022-06-08', '2022-06-10'], totalNumber: '2715280.006', increase: -5.01 },
 *         { title: '货到付款订单数', dateArr: ['2022-06-02', '2022-06-02'], totalNumber: '520.8', increase: '55.00' },
 *         { title: '签收率', dateArr: ['2022-06-08', '2022-06-10'], totalNumber: '18.04', increase: -15 }
 *       ],
 */
export default {
  name: 'BasicData',
  props: {
    basicDataItem: {
      type: Object,
      default: () => {}
    },
    basicDataItemIndex: {
      type: Number,
      default: () => 0
    }
  },
  data () {
    return {
      // levelList: null
      resetDateObj: {},
      isHome: false // 当前页是否为首页
    }
  },
  watch: {
    basicDataItem: {
      handler (newVal, oldVal) {
        this.resetDate()
      },
      deep: true
    }
  },
  mounted () {
    this.$nextTick(_ => {
      this.resetDate()
      if (this.$route.name === 'dataBoardIndex') {
        this.isHome = true
      }
    })
  },
  created () {},
  methods: {
    resetDate () {
      let dateStr = '~'
      const tempObj = Object.assign({}, this.basicDataItem)
      if (tempObj.dateArr[0] === tempObj.dateArr[1]) {
        dateStr = tempObj.dateArr[0]
      } else {
        // dateStr = `${tempObj.dateArr[0]}~${tempObj.dateArr[1]}`
        dateStr = `${tempObj.dateArr[0]}至${tempObj.dateArr[1]}`
      }
      tempObj.dateStr = dateStr
      this.resetDateObj = tempObj
      // console.log(this.resetDateObj)
    }
  }
}
</script>
<style scoped lang="scss">
.base-data-item {
  //flex: 1;
  //width: 371px;
  //height: 154px;
  border-radius: 12px;
  margin-right: 16px;
  padding: 16px 20px;
  box-shadow: 1px 2px 10px #e1e1e1;
  color: #333333;
  transition: all 0.5s ease-in;
  &:last-child {
    margin-right: 0;
  }

  .title {
    margin-bottom: 20px;
    label{
      font-size: 16px;
      font-weight: bold;
    }
    span{
      font-size: 14px;
      font-weight: 400;
      color: #999999;
      float: right;
    }
  }

  .total-number {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 12px;

    span {
      font-size: 25px;
    }
  }

  p {
    position: relative;
  }
}

.base-data-item-redbg {
  background: linear-gradient(90deg, rgba(243, 63, 63, 0) 0%, rgba(243, 63, 63, 0.1) 150%);
}

.base-data-item-greenbg {
  background: linear-gradient(88deg, rgba(17, 170, 97, 0) 0%, rgba(18, 171, 98, 0.1) 150%);
}

.compare{
  p{
    display: inline-block;
  }
  p + p {
    margin-left: 10px;
    float: right;
  }
}

.arrow {
  border-radius: 50%;
  overflow: hidden;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  padding: 1px;
  transform: scale(1);
  position: absolute;
  top: 2px;
  left: 0;
}

.data-red, .data-green {
  padding-left: 30px;
  font-size: 14px;
  label {
    margin-right: 10px;
  }
}

.data-red {
  color: #F33F3F;

  .south-east {
    //display: block;
    color: #f65b5b;
    background-color: #ffe6e6;
  }

  .north-east {
    display: none;
  }
}

.data-green {
  color: #12AB62;

  .south-east {
    display: none;
  }

  .north-east {
    //display: block;
    color: #2bb473;
    background-color: #daf7e9;
  }
}

.base-data-item .title label i:before {
  font-weight: 100;
  color: rgba(230,162,60,0.8);
}
</style>
